<html lang="en" xmlns:button="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>主页</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/1.0.0/css/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.serializeJSON/1.0.2/jquery.serializeJSON.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/smalot-bootstrap-datetimepicker/1.0.0/js/bootstrap-datetimepicker.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.0/extensions/editable/bootstrap-table-editable.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

    <script>
        function refreshCode() {
            // TODO ajax 请求图片，设置给 img
            let xhr = new XMLHttpRequest();
            xhr.open('GET', "/ssh_03/teacher/code.action", true);
            xhr.responseType = "blob";//关键的一步
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        let blob = this.response;
                        let src = URL.createObjectURL(blob);
                        $("#img_code").attr("src", src);
                    }
                }
            };
            xhr.send();
        }


        // 项目名字
        const projectName = "/ssh_03";
        const actionName = "/exam/getAll.action";
        const ExamUrl = projectName + actionName;


        function parseParams(data) {
            // TODO json to URL params
            try {
                const tempArr = [];
                for (const i in data) {
                    const key = encodeURIComponent(i);
                    const value = encodeURIComponent(data[i]);
                    tempArr.push(key + '=' + value);
                }
                return tempArr.join('&');
            } catch (err) {
                return '';
            }
        }

        $(function () {
            // TODO 页面加载完成后的操作
            setScoreTableText();
            refreshCode();
        });


        function deleteAll() {
            // TODO 批量删除方法
            if (window.confirm("确定要删除？")) {
                // 确定后的行为
                // 获取所有被选中的 score
                let json = $("#tab_score").bootstrapTable("getSelections");
                let deleteIdArray = [];
                json.forEach(element => {
                    deleteIdArray.push(element.id);
                });
                console.log(deleteIdArray);
                // 通过 Ajax，去访问 action
                $.ajax({
                    url: projectName + "/exam/delete.action",
                    data: {
                        list: deleteIdArray,
                    },
                    dataType: "json",
                    success: function (data) {
                        alert(data.message);
                        // 刷新表格
                        $("#tab_score").bootstrapTable("refresh");
                    }

                });
            }
        }

        function login() {
            // TODO 登陆的方法
            // 表单转换的 json 字符串
            let jsonStr = $("#teacher_login").serializeJSON();
            console.log(jsonStr);
            // json 转 url 参数
            jsonStr = parseParams(jsonStr);
            console.log(jsonStr);
            $.ajax({
                type: "post",
                data: jsonStr,
                dataType: "json",
                cache: false,
                url: projectName + "/teacher/login.action",
                success: function (message) {
                    alert(message.message);
                    if (message.status === 200) {
                        // 成功！
                        // 隐藏 登陆 模态框
                        $("#login").modal("hide");
                        // 展示 添加模态框
                        $("#addScoreModel").modal("show");
                    }
                }
            });
        }

        function addScore() {
            // 添加考试
            // 获取 form_addScore 中的所有数据定义的 js 对象
            let json = $("#form_addScore").serializeJSON();
            // {id: "2", time: "2020-10-02T21:39", topic: "范德萨"}
            // js 对象转为 json 类型的字符串
            json = JSON.stringify(json);
            // {"id":"2","time":"2020-10-02T21:39","topic":"范德萨"}

            $.ajax({
                type: "PUT",
                data: json,
                dataType: "json",
                cache: false,
                // 请求参数为 json 时，必须添加此请求头
                contentType: "application/json;charset=utf-8",
                url: projectName + "/exam/add.action",
                success: function (message) {
                    alert(message.message);
                    if (message.status === 200) {

                        // 成功！
                        // 隐藏模态框
                        $("#addScoreModel").modal("hide");
                        // 刷新表格
                        $("#tab_score").bootstrapTable("refresh");
                    }
                    if (message.status === 400) {
                        // 没有登陆成功！，展示登陆的模态框
                        $("#addScoreModel").modal("hide");
                        $("#login").modal("show");
                    }
                }
            })

        }

        function setScoreTableText(message) {
            let $tabScore = $("#tab_score");
            // 销毁
            $tabScore.bootstrapTable("destroy");
            // 给 tab_score 填充数据
            $tabScore.bootstrapTable({
                // 添加分页属性
                // 是否显示分页
                clickToSelect: true,//一定要写！！可以选择：用于 edittable
                // 点击选中一行
                pagination: true,
                // 分页方式 client客户端分页，server服务端分页（*）
                sidePagination: "server",
                // 初始化加载第一页，默认第一页
                pageNumber: 1,
                // 每页的的记录数
                pageSize: 10,
                // 可以选择的每页的行数
                pageList: [3, 5, 7, 9, 11, 13],

                // 发送数据属性
                // 数据类型
                dataType: "json",
                // 是否使用缓存，默认使用
                cache: false,
                // 请求方式
                type: "get",
                // 请求的 URL
                url: ExamUrl,

                // 默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
                queryParamsType: 'undefined',
                queryParams: function queryParams(params) {
                    return {
                        /**
                         * e.g. http://localhost:8080/ssh_03/exam/getAll.action?pageNumber=7&pageSize=13
                         * 键 pageNumber 和 pageSize 是 action 的参数
                         * 值 params.pageNumber,params.pageSize, 是内置，不能更改
                         */
                        pageNumber: params.pageNumber,
                        pageSize: params.pageSize,
                    };
                },

                // 通过 responseHandler 把响应的数据中的数据拿出来
                responseHandler: function (ResponseEntity) {
                    /**
                     * ResponseEntity 是 action 响应的对象
                     *
                     * 键 rows 和 total 是内置对象
                     */
                    if (ResponseEntity.status === 200) {
                        return {
                            rows: ResponseEntity.obj.list,
                            total: ResponseEntity.obj.count,
                        }
                    }
                },


                // 定义 Columns
                /**
                 * field 是 ResponseEntity.obj.list 中的每个数组的属性的名字
                 * e.g. list=[Exam(id=118, time=2020-10-22 00:00:00.0, topic=题目26), Exam(id=163, time=2020-10-22 00:00:00.0, topic=题目26), Exam(id=27, time=2020-10-23 00:00:00.0, topic=题目27), Exam(id=74, time=2020-10-23 00:00:00.0, topic=题目27), Exam(id=119, time=2020-10-23 00:00:00.0, topic=题目27), Exam(id=164, time=2020-10-23 00:00:00.0, topic=题目27), Exam(id=28, time=2020-10-24 00:00:00.0, topic=题目28), Exam(id=75, time=2020-10-24 00:00:00.0, topic=题目28), Exam(id=120, time=2020-10-24 00:00:00.0, topic=题目28), Exam(id=165, time=2020-10-24 00:00:00.0, topic=题目28), Exam(id=29, time=2020-10-25 00:00:00.0, topic=题目29), Exam(id=76, time=2020-10-25 00:00:00.0, topic=题目29), Exam(id=121, time=2020-10-25 00:00:00.0, topic=题目29)]
                 */
                columns: [
                    // 删除的多选框
                    {checkbox: true},
                    {
                        field: "id",
                        title: "考试的 id",
                    },
                    {
                        // 毫秒值转为 字符串日期
                        field: "time",
                        title: "考试的时间",
                        formatter: function (value, row, index) {
                            // 2020/9/27 上午12:00:00
                            return new Date(value).toLocaleString();
                        },
                    },
                    {
                        field: "topic",
                        title: "题目",
                        // 在 {} 外，多写了 () ，sb
                        editable: {
                            // 编辑框的类型。支持text|textarea|select|date|checklist|datetime等
                            type: 'text',
                            //编辑框的标题
                            title: '修改题目',
                            //是否禁用编辑
                            disabled: false,
                            //空值的默认文本
                            emptytext: "题目1",
                            //编辑框的模式：支持 popup 和 inline 两种模式，默认是popup
                            mode: "popup",
                            //字段验证
                            validate: function (value) {
                                if (!$.trim(value)) {
                                    return '不能为空';
                                }
                            }
                        },
                    }
                ],
                onEditableSave: function (filed, row, oldValue) {
                    //把当前行数据转换为json串对象
                    let jsonStr = JSON.stringify(row);
                    //通过ajax去 访问action修改
                    $.ajax({
                        type: "PUT",
                        data: jsonStr,
                        dataType: "json",
                        cache: false,
                        /*请求参数时json必须添加此请求头*/
                        contentType: "application/json;charset=utf-8",
                        url: projectName + "/exam/update.action",
                        success: function (responseEntity) {
                            //弹出提示信息
                            alert(responseEntity.message);
                            if (responseEntity.status === 200) {
                                //刷新表格
                                $("#tab_score").bootstrapTable("refresh");
                            }
                        }
                    });
                },
            });
        }

    </script>

</head>
<body>


<!--所有bs的组件必须写在一个class=container的div中-->
<div class="container">


    <!--添加 按钮-->
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addScoreModel">添加成绩</button>
        <button type="button" class="btn btn-default" onclick="deleteAll();">批量删除</button>
    </div>

    <!--  登陆按钮  -->
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#login">老师登陆</button>
    </div>

    <!--定义页头-->
    <div class="page-header">

        <h1>周考试系统 <small>第一次考试</small></h1>
    </div>
    <!---定义一个表格-->
    <div class="panel panel-default">
        <div class="panel-heading">详情展示</div>
        <table class="table" id="tab_score">
        </table>
    </div>


</div>

<!-- 添加一个模态框 ,id 是之前的 data-target="#addScoreModel"  -->
<div class="modal fade" id="addScoreModel">
    <!--  模态框 详情  -->
    <div class="modal-dialog" role="document">
        <!-- 模态框  正文-->
        <div class="modal-content">
            <!-- 模态框 标题 -->
            <div class="header">
                <h4 align="center">添加成绩</h4>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <!-- 添加的表单 -->
                <form id="form_addScore">

                    <div class="form-group">
                        <label class="control-label">考试的 id</label>
                        <input type="text" class="form-control" name="id">
                    </div>
                    <div class="form-group">
                        <label class="control-label">考试的 日期</label>
                        <input type="datetime-local" class="form-control" name="time">
                    </div>
                    <div class="form-group">
                        <label class="control-label">考试的 题目</label>
                        <input type="text" class="form-control" name="topic">
                    </div>

                </form>
            </div>
            <!--  模态框 结束      -->
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">取消</button>
                <button class="btn btn-primary" onclick="addScore();">提交</button>

            </div>
        </div>
    </div>
</div>

<!-- 添加一个登陆模态框  -->
<div class="modal fade" id="login">
    <!--  模态框 详情  -->
    <div class="modal-dialog" role="document">
        <!-- 模态框  正文-->
        <div class="modal-content">
            <!-- 模态框 标题 -->
            <div class="header">
                <h4 align="center">老师登陆</h4>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <!-- 登陆的表单 -->
                <form id="teacher_login" method="get">

                    <div class="form-group">
                        <label class="control-label">老师的 id</label>
                        <input type="number" class="form-control" name="id">
                    </div>
                    <div class="form-group">
                        <label class="control-label">老师 密码</label>
                        <input type="password" class="form-control" name="password">
                    </div>

                    <div class="form-group">
                        <label class="control-label" style="color: blue;border-bottom:blue 2px double "
                               id="refresh_code" onclick="refreshCode();">刷新验证码 </label> <img
                            id="img_code" height="100px" width="100px">
                        <input type="text" class="form-control" name="code">
                    </div>

                </form>
            </div>
            <!--  模态框 结束      -->
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">取消</button>
                <button class="btn btn-primary" onclick="login();">提交</button>

            </div>
        </div>
    </div>
</div>

</body>
</html>
